import { memo } from 'react';

const Eheader = memo(({ handleMerge, handleFont, handleBorder, activeType }) => {
  return (
    <div className="header">
      <div className={`header-item ${!activeType ? 'is-disabled' : ''}`}>
        <h2>字体</h2>
        <i
          className="iconfont icon-bold"
          title="加粗"
          onClick={() => handleFont('fontWeight', 'bold')}
        ></i>
        <i
          className="iconfont icon-italics"
          title="斜体"
          onClick={() => handleFont('fontStyle', 'italic')}
        ></i>
        <i
          className="iconfont icon-underline"
          title="下划线"
          onClick={() => handleFont('textDecoration', 'underline')}
        ></i>
      </div>
      <div className={`header-item ${!activeType ? 'is-disabled' : ''}`}>
        <h2>对齐方式</h2>
        <i
          className="iconfont icon-a-alignleft"
          title="左对齐"
          onClick={() => handleFont('justifyContent', 'start')}
        ></i>
        <i
          className="iconfont icon-centre"
          title="左右居中"
          onClick={() => handleFont('justifyContent', 'center')}
        ></i>
        <i
          className="iconfont icon-a-alignright"
          title="右对齐"
          onClick={() => handleFont('justifyContent', 'end')}
        ></i>
        <i
          className="iconfont icon-a-aligntop"
          title="上对齐"
          onClick={() => handleFont('alignItems', 'start')}
        ></i>
        <i
          className="iconfont icon-a-verticalcenter"
          title="上下居中"
          onClick={() => handleFont('alignItems', 'center')}
        ></i>
        <i
          className="iconfont icon-a-aligntop down"
          title="下对齐"
          onClick={() => handleFont('alignItems', 'end')}
        ></i>
        <div className={`header-item ${!activeType ? 'is-disabled' : ''}`}>
          <h2>边框线</h2>
          <i
            className="iconfont icon-a-topframe"
            title="上框线"
            onClick={() => handleBorder('borderTop')}
          ></i>
          <i
            className="iconfont icon-a-bottomframe"
            title="下框线"
            onClick={() => handleBorder('borderBottom')}
          ></i>
          <i
            className="iconfont icon-a-leftframe"
            title="左框线"
            onClick={() => handleBorder('borderLeft')}
          ></i>
          <i
            className="iconfont icon-a-rightframe"
            title="右框线"
            onClick={() => handleBorder('borderRight')}
          ></i>
          <i
            className="iconfont icon-frameless"
            title="无框线"
            onClick={() => handleBorder('none')}
          ></i>
          <i
            className="iconfont icon-frame"
            title="所有框线"
            onClick={() => handleBorder('all')}
          ></i>
          <i
            className="iconfont icon-a-outframe"
            title="外框线"
            onClick={() => handleBorder('out')}
          ></i>
          <i
            className="iconfont icon-a-innerframe"
            title="内框线"
            onClick={() => handleBorder('inner')}
          ></i>
          <i className="iconfont icon-merge" title="合并单元格" onClick={() => handleMerge()}></i>
        </div>
      </div>
    </div>
  );
});

export default Eheader;
